<template>
    <div class="flex flex-col flex-1 p-2">
        <div class="flex justify-between">
            <div class="flex-1"></div>
            <div>
                <!-- <el-button type="primary" @click="openDialog">新增</el-button> -->
            </div>
        </div>
        <CustomTable class="mt-2" :data="tableData" :total="tableTotal" v-model:page-size="pageSize" @pageSize="getList"
            v-model:currentPage="pageNum" @currentPage="getList">
            <el-table-column type="index" width="60" label="序号" />
            <el-table-column prop="id" label="订单编号" />
            <el-table-column prop="orderTime" label="下单时间" />
            <el-table-column label="商品">
                <template #default="{ row }">

                    <div>
                        <div v-for="item in row.orderGoods">
                            <el-image style="width: 100px; height: 100px" :src="item.goodsImg" fit="cover" />
                            <div>{{ item.goodsName }} ￥{{ item.goodsPrice }} * {{ item.goodsNum }}</div>
                        </div>
                    </div>

                </template>
            </el-table-column>
            <el-table-column label="订单状态">
                <template #default="{ row }">
                    {{ getStatus(row.orderStatus) }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button text type="primary" v-if="row.orderStatus === 2" @click="sendGoods(row)">发货</el-button>
                </template>
            </el-table-column>
        </CustomTable>
    </div>
</template>

<script setup lang="ts">
import CustomTable from '@/components/CustomTable.vue'
import { onMounted, reactive, ref } from 'vue'
import {
    getOrderList, sendOrder
} from '@/apis/order'
import { ElMessage } from 'element-plus'

const tableData = ref([])
const tableTotal = ref(0)
const pageSize = ref(10)
const pageNum = ref(1)

const getList = async () => {
    const res = await getOrderList({
        pageNum: pageNum.value,
        pageSize: pageSize.value
    })
    tableData.value = res.list
    tableTotal.value = res.total
}
const getStatus = (statusCode) => {
    const statusMap = {
        1: '待付款',
        2: '待发货',
        3: '待收货',
        4: '已完成',
        5: '已退款'
    };
    // 将输入转换为数字，避免字符串类型的键（如 "1"）导致匹配失败
    const code = Number(statusCode);
    // 返回匹配的状态，若无则返回 '未知状态'
    return statusMap[code] || '未知状态';
}
const sendGoods = async (row) => {
    await sendOrder(row.id)
    ElMessage.success("发货成功")
    getList()
}
onMounted(() => {
    getList()
})
</script>

<style scoped></style>
